<template>
  <a-button
    shape="circle"
    title="批量添加云端设备"
    class="fixed flex items-center justify-center w-12 h-12 text-xl cursor-pointer bottom-24 right-12"
    @click="showModal"
  >
    <FileAddOutlined />
  </a-button>
  <a-modal
    class="add-device-batch-modal"
    title="批量添加云端设备"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :multiple="true"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      :action="importApi"
      @change="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <InboxOutlined></InboxOutlined>
      </p>
      <p class="ant-upload-text">点击或拖入文件进行上传</p>
      <p class="ant-upload-hint">
        支持单一或批量上传。请勿上传危险数据。仅支持xls、xlsx、csv格式。
      </p>
    </a-upload-dragger>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from "vue";
import { FileAddOutlined, InboxOutlined } from "@ant-design/icons-vue";
import { FileInfo } from "model";
import message from "ant-design-vue/es/message";
import api from "@/api/types";

export default defineComponent({
  name: "AddDeviceBatchModal",
  components: {
    FileAddOutlined,
    InboxOutlined,
  },
  setup() {
    const refresh: Function = inject("refresh") ?? new Function();
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const handleOk = async () => {
      confirmLoading.value = true;
      confirmLoading.value = false;
      visible.value = false;
    };
    const showModal = () => {
      visible.value = true;
    };
    const fileList = ref([]);
    const handleChange = (info: FileInfo) => {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
        refresh();
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    };
    const importApi = api.IMPORT_DEVICE;
    return {
      visible,
      handleOk,
      showModal,
      confirmLoading,
      fileList,
      handleChange,
      importApi,
    };
  },
});
</script>

<style scoped lang="scss"></style>
